<style>
    .column {
        width: 300px;
        float: left;
        padding-bottom: 100px;
    }

    .portlet {
        margin: 0 1em 1em 0;
    }

    .portlet-header {
        margin: 0.3em;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 0.5em;
    }

    .portlet-header .ui-icon {
        float: right;
    }

    .portlet-content {
        padding: 1em;
    }

    .ui-sortable-placeholder {
        border: 1px dotted black;
        visibility: visible !important;
        height: 50px !important;
    }

    .ui-sortable-placeholder * {
        visibility: hidden;
    }
</style>
<script>
$(function() {
    $(".column").sortable({
        connectWith: ".column"
    });

    $(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
            .find(".portlet-header")
            .addClass("ui-widget-header ui-corner-all")
            //.prepend("<a href='#' class='ui-dialog-titlebar-close ui-corner-all' role='button'><span class='ui-icon ui-icon-minusthick' style='padding-right: 3px'></span></a>")
            .end()
            .find(".portlet-content");

    /*$(".portlet-header .ui-icon").click(function() {
        $(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick");
        $(this).parents(".portlet:first").find(".portlet-content").toggle();
    });*/

    $(".column").disableSelection();
});
</script>

<div style="padding:6px">
    <h3>Dashboard</h3>
</div>
<div class="demo" style="padding:6px">
    <div class="column">

        <div class="portlet">
            <div class="portlet-header">Overview</div>
            <div class="portlet-content">overview</div>
        </div>

        <div class="portlet">
            <div class="portlet-header">New members</div>
            <div class="portlet-content">3 members.</div>
        </div>

    </div>

    <div class="column">

        <div class="portlet">
            <div class="portlet-header">Announcement</div>
            <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
        </div>

    </div>

    <div class="column">

        <div class="portlet">
            <div class="portlet-header">Downloads</div>
            <div class="portlet-content">download 1<br>download 2<br>download 3<br></div>
        </div>

        <div class="portlet">
            <div class="portlet-header">Photo</div>
            <div class="portlet-content">Empty</div>
        </div>

    </div>

</div>
